import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../../config/global';

const scale = GLOBAL.SCALE;

export class SinoNewOilApproveItem extends Component {
	constructor(props) {
		super(props);

		this.state = {
			pageFlowMap: {}
		}
	}

	componentWillMount() {
	}

	render() {
		const { itemInfo, goDetail, approveType, tabIndex, isCancel, choice } = this.props;
		let { oppoOrderInfo, oppoOrderItemList, orderInfo, orderItemList, taskInfo } = itemInfo;
		let { bizMode, orderId, createTime, companyName, totalGoodsAmt, bizStaffName, organName, orderType, bizTeamName, status } = orderInfo || {};
		let { taskId, businessKey, formKey, auditResultName } = taskInfo || {};
		let totalQuantity = 0;
		// let itemList = tabIndex === 2 ? oppoOrderItemList : orderItemList;
		if (orderItemList && orderItemList.length) {
			orderItemList.map((item, index) => {
				totalQuantity += item.quantity;
			})
		}
		return (
			<TouchableOpacity key={taskId} activeOpacity={.5} style={styles.orderCell}
				onPress={() => {
					if (!orderInfo) return;
					goDetail({
						orderId: orderId || '',
						businessKey,
						taskId,
						formKey,
						isCancel: isCancel,
						orderType,
						bizMode,
						resUrl: 'SinoNewOrderDetailPage',
						status,
						statusName: '待审批',
						companyName: companyName || '',
					}, '中新油审批列表')
				}
				}>
				<View style={styles.order}>
					<View style={styles.orderHeadView}>
						<View style={styles.orderHead}>
							<View style={styles.orderHeadLeft}>
								<Text style={styles.orderHeadText}>
									{orderId || '-'}
								</Text>
								{
									orderInfo && orderInfo.status && orderInfo.status == 'EXECUTING' && orderInfo.sapPushStatus == '2' ? (
										<View style={styles.backoutIcon}>
											<Text style={{ color: '#fff', fontSize: 11 * scale }}>撤</Text>
										</View>
									) : null
								}
							</View>
							<Text style={styles.statusText}>{createTime || '-'}</Text>
						</View>
						<Text style={{ fontSize: 10 * scale, paddingBottom: 12 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
					</View>
					<View style={{ marginBottom: 18 * scale, paddingTop: 10 * scale }}>
						{
							orderItemList && orderItemList.length ?
								orderItemList.map((item, index) => {
									return (
										<View key={index}>
											<View style={styles.orderCol}>
												<Text style={styles.orderVal}>{item.goodsName || '-'}</Text>
												{
													bizMode ?
														<View style={[styles.amountView]}>
															<Text style={styles.bizModeFlag}>采</Text>
															<Text style={[styles.orderVal]}>{(oppoOrderItemList && oppoOrderItemList[index].price) || '-'}</Text>
															<Text style={styles.uomName}>{'美元/' + ((oppoOrderItemList && oppoOrderItemList[index].uomName) || '吨')}</Text>
														</View>
														: null
												}
											</View>
											<View style={styles.orderCol}>
												<View style={styles.infoWidthUom}>
													<Text style={[styles.orderVal]}>{item.quantity || '-'}</Text>
													<Text style={styles.uomName}>{item.uomName || '吨'}</Text>
												</View>
												<View style={styles.amountView}>
													{bizMode ? <Text style={[styles.bizModeFlag, { color: '#F5A623' }]}>销</Text> : null}
													<Text style={[styles.orderVal]}>{item.price || '-'}</Text>
													<Text style={styles.uomName}>{'美元/' + (item.uomName || '吨')}</Text>
												</View>
											</View>
										</View>
									)
								})
								: null
						}
					</View>

					<View style={styles.bottomInfoView}>
						<View style={styles.bottomInfoItem}>
							<Text style={[styles.allCountLabel, { width: 200 * scale }]}>{companyName || ''}</Text>
							<View style={styles.amountView}>
								<Text style={styles.allAmountLabel}>{'共'}</Text>
								<Text style={styles.orderVal}>{totalQuantity}</Text>
								<Text style={[styles.uomName, { fontSize: 12 * scale }]}> {(orderItemList && orderItemList[0].uomName) || '吨'}</Text>
							</View>
						</View>
						<View style={styles.bottomInfoItem}>
							<Text style={styles.allCountLabel}>{(bizStaffName || bizTeamName || organName) ? `${bizStaffName || '-'} | ${bizTeamName || '--'} | ${organName || '-'}` : '--'}</Text>
							<View style={styles.amountView}>
								<Text style={styles.allAmountLabel}>{'合计  $'}</Text>
								<Text style={styles.allAmount}>{totalGoodsAmt || ''}</Text>
							</View>
						</View>
					</View>
				</View>
			</TouchableOpacity >
		)
	}
}

const styles = StyleSheet.create({
	orderCell: {
		width: 351 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginTop: 20 * scale,
		marginBottom: 20 * scale,
		marginLeft: 12 * scale,
		marginRight: 12 * scale,
		borderRadius: 5 * scale
	},
	order: {
		width: 327 * scale,
	},
	orderHead: {
		width: 327 * scale,
		height: 44 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadView: {
		width: 327 * scale,
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
	},
	orderHeadLeft: {
		height: 44 * scale,
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 12 * scale,
		color: '#222',
		flexWrap: 'wrap',
	},
	statusText: {
		fontSize: 12 * scale,
		color: '#848A96',
	},
	orderCol: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 10 * scale
	},
	orderVal: {
		fontSize: 14 * scale,
		color: '#000'
	},
	bottomInfoView: {
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
		paddingTop: 18 * scale,
		paddingBottom: 12 * scale,
	},
	bottomInfoItem: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 6 * scale
	},
	allCountLabel: {
		fontSize: 12 * scale,
		color: '#848A96'
	},
	allAmount: {
		fontSize: 16 * scale,
		color: '#000',
		textAlign: 'right'
	},
	allAmountLabel: {
		paddingRight: 3 * scale,
		fontSize: 12 * scale,
		color: '#000',
		textAlign: 'right'
	},
	amountView: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
	},
	bizModeFlag: {
		fontSize: 14 * scale,
		color: '#82CD4B',
		paddingRight: 6 * scale
	},
	infoWidthUom: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	uomName: {
		textAlign: 'right',
		fontSize: 12 * scale
	},
	backoutIcon: {
		width: 20 * scale,
		height: 20 * scale,
		backgroundColor: '#CD4B4B',
		borderRadius: 20 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		marginLeft: 8 * scale
	},
})